<template>
  <el-row :gutter="2">
    <el-col :span="8">
      <el-upload
        class="oss-upload"
        ref="upload"
        action=""
        drag
        :show-file-list="false"
        :multiple="true"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :auto-upload="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!--        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
        <!--         <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
        <!-- <div slot="tip" class="el-upload__tip">只能上传  txt/docx/xlsx/jpg/png  文件，且不超过20MB</div> -->
      </el-upload>
    </el-col>
    <el-col :span="16" v-show="preFileList.length>0">
<!--      <el-row>-->
<!--        待上传列表-->
<!--      </el-row>-->
      <el-row style="height: 1.5rem;font-size: 15px;font-weight: bold">
        <el-col :span="10">
          别名
        </el-col>
        <el-col :span="12">
          原文件名
        </el-col>
      </el-row>
      <div style="height: 12rem;width:100%;overflow: auto;margin-top: 5px">
        <el-row v-for="(preFile,index) in preFileList" :key="index" style="margin-top: 5px">
          <el-col :span="10" style="height: 3rem">
            <input placeholder="输入文件别名,不输入默认使用源文件名" type="text" v-model="preFile.name"/>
          </el-col>
          <el-col :span="12" style="line-height: 3rem;height: 3rem">
            {{ preFile.nativeName }}
          </el-col>
          <el-col :span="2">
            <el-button type="danger" icon="el-icon-delete" size="small" circle
                       @click="removePreFile(index)"></el-button>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "FileUploadInput",
  props: {
    fileFilter: Array,
    uploadSig: Object
  },
  data() {
    return {
      preFileList: []
    }
  },
  mounted() {
  },
  methods: {
    removePreFile(index) {
      let nList = [];
      for (let o in this.preFileList) {
        if (o * 1 === index) {
          continue
        }
        nList.push(this.preFileList[o]);
      }
      this.preFileList = nList;
    },
    getPreFiles() {
      return this.preFileList;
    },
    clear() {
      this.preFileList = [];
    },
    handleRemove() {

    },
    getPrefix(name,type){
      try {
        let ns=name.split('.');
        if(type){
          return ns[1];
        }
        return ns[0]
      } catch (e) {
        return null;
      }
    },
    handleChange(selected, list) {
      let self=this;
      this.preFileList.push({
        name: null,
        type: self.getPrefix(selected.name,true),
        nativeName: self.getPrefix(selected.name,false),
        raw: selected.raw
      });
    }
  }
}
</script>

<style scoped>

</style>
